/*
 * T.Popup 是用来在地图上弹出一个Popup
 */

T.Map.mergeOptions({
    closePopupOnClick: true
});

T.Popup = T.Layer.extend({
    options: {
        pane: 'popupPane',
        duration: 250,
        closeButton: true,
        autoClose: true,
        minWidth: 50,
        maxWidth: 300,
        offsetX: 0,
        offsetY:0
    },
    
    initialize: function (options) {
        T.setOptions(this, options);
    },
    
    openOn: function (map) {
        if (!this._container) {
            this._initLayout(map);
            this._updateContent();
        }
        
        if(!this.overlay){
            this.overlay = new ol.Overlay({
                offset: [this.options.offsetX,this.options.offsetY],
                element: this._container,
                autoPan: true,
                autoPanAnimation: {
                  duration: this.options.duration
                }
            });
            
            map.tinyMap.addOverlay(this.overlay);
            
            this._popup = this;
            
            this._updateLayout();
            this._updatePosition();
        }
        
        return this;
    },
    
    onAdd: function (map) {
        this.openOn(map);
    },
    
    setPosition: function (latlng) {
        if (this.overlay && this.isShow && this.options.autoClose) {
            if(latlng[0]==this._latlng[0] && latlng[1]==this._latlng[1]){
                this.isShow = false;
                this.closePopup();
                return this;
            }
        }else{
            this.isShow = true;
        }
        
        this._latlng = latlng;
        if (this.overlay && this.isShow) {
            this._updatePosition();
        }
        return this;
    },
    
    setContent: function (content) {
        this._content = content;
        if (this.overlay && this.isShow) {
            this._updateLayout();
            this._updateContent();
        }
        return this;
    },

    update: function () {
        this._updateContent();
        this._updateLayout();
        this._updatePosition();
    },
    
    closePopup: function(){
        if(this.overlay){
            this.overlay.setPosition(undefined);
        }
        return false;
    },
    
    _updateContent: function(){
        if(this._contentNode && this._content){
            var node = this._contentNode;
            
            if (typeof this._content === 'string') {
                node.innerHTML = this._content;
            } else {
                while (node.hasChildNodes()) {
                    node.removeChild(node.firstChild);
                }
                node.appendChild(this._content);
            }
            
            this._contentWidth = node.offsetWidth;
            
            this.fire('contentupdate');
        }
    },
    
    _updatePosition: function(){
        if (this.overlay) {
            this.overlay.setPosition(this._latlng);
        }
    },
    
    _updateLayout: function () {
        var container = this._contentNode,
            style = container.style;

        style.width = '';
        style.whiteSpace = 'nowrap';

        var width = this._contentWidth;
        width = Math.min(width, this.options.maxWidth);
        width = Math.max(width, this.options.minWidth);

        style.width = (width + 1) + 'px';
        style.whiteSpace = '';

        style.height = '';

        var height = container.offsetHeight,
            maxHeight = this.options.maxHeight,
            scrolledClass = 'ol-popup-scrolled';

        if (maxHeight && height > maxHeight) {
            style.height = maxHeight + 'px';
            T.DomUtil.addClass(container, scrolledClass);
        } else {
            T.DomUtil.removeClass(container, scrolledClass);
        }

        this._containerWidth = this._container.offsetWidth;
    },
    
    _initLayout: function (map) {
        this._map = map;
        
        var prefix = 'ol-popup',
            container = this._container = T.DomUtil.create('div',
            prefix + ' ' + (this.options.className || ''));

        if (this.options.closeButton) {
            var closeButton = this._closeButton = T.DomUtil.create('a', prefix + '-close', container);
            closeButton.href = '#close';
            closeButton.innerHTML = '&#215;';
            
            T.DomEvent.on(closeButton, 'click', this._onCloseButtonClick, this);
        }

        var wrapper = this._wrapper = T.DomUtil.create('div', prefix + '-content-wrapper', container);
        this._contentNode = T.DomUtil.create('div', prefix + '-content', wrapper);
        
        this.getPane().appendChild(this._container);
    },
    
    _onCloseButtonClick: function (e) {
        this.closePopup();
        T.DomEvent.stop(e);
    }
});

T.popup = function (options, source) {
    return new T.Popup(options, source);
};


T.Map.include({
    openPopup: function (popup, latlng, options) {
        if (latlng) {
            popup.setPosition(latlng);
        }
        this._popup = popup;
        return this.addOverlay(popup);
    },

    closePopup: function (popup) {
    }
});

T.Layer.include({
    bindPopup: function (content, options) {

        if (!this._popup || options) {
            this._popup = new T.Popup(options, this);
        }
        this._popup.setContent(content);

        return this;
    },

    unbindPopup: function () {
       
        return this;
    },
    
    openPopup: function (layer, latlng) {
        if (!(layer instanceof T.Layer)) {
            latlng = layer;
            layer = this;
        }
        
        if(this._latlng){
            latlng = this._latlng;
        }
        
        try{
            if (this._popup && this._map) {
                this._map.openPopup(this._popup, latlng);
            }
        }catch(e){}
        
        return this;
    }
});
